<!-- 日志填写 -->
<template>
  <div class="record-send">
    <!-- 顶部标题栏组件 -->
    <top-header></top-header>

    <!-- 日志填写表单 -->
    <van-form @submit="onSubmit">
      <van-field v-model="info" label="工作日志:" name="info" type="textarea" :autosize="{ maxHeight: 300,minHeight: 300 }" />
      <van-field v-model="remark" label="备注" name="remark" type="textarea" maxlength="50" show-word-limit />
      <div class="submit-btn">
        <van-button type="info" size="small" block color="burlywood">日志填写</van-button>
      </div>
    </van-form>

    <!-- 路由导航组件 -->
    <nav-bar></nav-bar>

  </div>
</template>

<script>
import { TopHeader, NavBar } from '@/components'
import { addApiLog } from '@/request/api'
export default {
  name: 'Record',
  components: {
    TopHeader,
    NavBar
  },
  data () {
    return {
      info: '', // 工作日志
      remark: '' // 备注
    }
  },
  methods: {
    // 日志填写提交
    onSubmit (values) {
      if (values.info) {
        this.$dialog.confirm({
          title: '提示',
          message: '您确定要发布此条日志吗?',
          confirmButtonColor: 'burlywood'
        }).then(() => {
          values.name = sessionStorage.getItem('userId')
          values.type = 'Add'
          console.log('submit', values)
          addApiLog(values).then(res => {
            console.log(res)
            if (res.msg === '添加成功') {
              this.$toast.success('发布成功')
              setTimeout(() => {
                this.$router.push('/myRecord')
              }, 2000)
            } else if (res.msg === '一天只能写一条日志') {
              this.$toast('一天只能写一条日志')
            } else {
              this.$toast.fail('发布失败')
            }
          })
        }).catch(() => {})
      } else {
        this.$dialog.alert({
          message: '工作日志必填',
          confirmButtonColor: 'burlywood'
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.record-send {
  width: 100%;
  height: 100%;
  .van-form {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 2.7rem);
  }
  .submit-btn {
    margin: .4rem;
  }
}
</style>
